<template>
  <div style="padding:0px;margin:0px;">
    <van-nav-bar title="找产品" fixed />

    <div class="container">
      <div class="sidebarcss">
          <van-sidebar v-model="activeKey" @change="onChangeSidebar">
            <van-sidebar-item :title="item.name" v-for="item in productCategory" :key="item.categoryId"/>
          </van-sidebar>
      </div>
      <div class="rightcss">
        <div class="active-prizelist sticky">
          <ul class="active-ul">
            <li v-for="(item) in productCategoryXl" :key="item.categoryId"  @click="clickXl(item)">
              <van-tag type="warning" :plain="clickXlData.categoryId!==item.categoryId" size="large">{{item.name}}</van-tag>
            </li>
          </ul>
        </div>
        <div class="rightcss1">
          <div class="listcss">
            <div class="pbg" v-for="item in productList" :key="item.productId"  @click="toProductInfo(item.companyId,item.productId)">
              <img :src="item.image1" class="pimg"/>
              <div class="pname">{{item.name}}</div>
            </div>
            <div v-if="productList.length===0" class="emptydiv">
              <!--<van-empty description="产品未上架，去逛逛别的" />-->
              <div style="padding-left: 20px;padding-top: 20px;font-size: 20px;text-align: center;">
                没有查询到数据
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { queryPlatformProductCategory, queryProductInfo } from 'api/api'

export default {
  name: 'Search',
  data() {
    return {
      productCategory: [],
      productCategoryXl: [],
      productList: [],
      activeKey: 0,
      clickXlData: { categoryId: '' },
      clickDlData: { categoryId: '' }
    }
  },
  created() {
    this.queryPlatformProductCategory()
  },
  methods: {
    queryPlatformProductCategory() {
      const param = { parentId: 0 }
      queryPlatformProductCategory(param).then(response => {
        this.productCategory = response.data
        this.queryProductInfo(response.data[0].categoryId)
        this.queryPlatformProductCategoryXl(response.data[0].categoryId)
        this.clickDlData = response.data[0]
      })
    },
    queryPlatformProductCategoryXl(categoryId) {
      const param = { parentId: categoryId }
      queryPlatformProductCategory(param).then(response => {
        this.productCategoryXl = [{ categoryId: '', name: '全部' }, ...response.data]
        this.clickXlData = { categoryId: '', name: '全部' }
      })
    },
    queryProductInfo(category) {
      const param = { platformCategory: category }
      queryProductInfo(param).then(response => {
        this.productList = response.data
      })
    },
    onChangeSidebar(index) {
      this.queryProductInfo(this.productCategory[index].categoryId)
      this.queryPlatformProductCategoryXl(this.productCategory[index].categoryId)
    },
    onClickFl(name, title) {
      console.log(name)
      this.clickXlData = this.productCategoryXl[name]
      this.queryProductInfo(this.clickXlData.categoryId)
    },
    clickXl(item) {
      if (item.categoryId === '') {
        this.clickXlData = { categoryId: item.categoryId, name: '全部' }
      } else {
        this.clickXlData = item
      }
      this.queryProductInfo(item.categoryId)
    },
    toProductInfo(companyId, productId) {
      this.$router.push({ path: '/product', query: { companyId: companyId, productId: productId }})
    }
  }
}
</script>

<style scoped>

  .container{
    width:100%;
    height:calc(100vh - 1.33333rem - 1.22667rem);
    display:flex;
    padding-top: 1.22667rem;
/*
    margin-top: 1.22667rem;
*/
  }

  .container::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .sidebarcss{
    width:24%;
    height:calc(100vh  - 1.33333rem - 1.22667rem );
    overflow:auto;
  }

  .sidebarcss::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .rightcss{
    width: 75%;
    height:calc(100vh - 44px - 1.22667rem);
    display: flex;
    flex-direction: column;
    align-content: flex-start;
  }

  .rightcss1{
    width: 100%;
    height:calc(100vh - 1.22667rem - 1.17333rem);
    overflow:auto;
  }

  .rightcss::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .rightcss1::-webkit-scrollbar{
    display: none; /* Chrome Safari */
  }

  .pbg{
    width: 75%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding:10px
  }
  .pimg{
    height: 80px;
    width: 80px;
  }
  .pname{
    font-size: 18px;
    color: #333333;
    margin-left: 10px;
  }

  .active-prizelist .active-ul{
    width: 100%;
    height: 44px;
    display: inline;
    white-space: nowrap;
    overflow-x:scroll;
    float:left;
    overflow-y:hidden;
    background-color: white;
  }

  .active-prizelist .active-ul li{
    display:inline-block;
    margin:0;
    padding-top: 10px;
    padding-left: 10px;
  }

  .active-prizelist .active-ul::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }

  .emptydiv{
    width: 100%;
  }

  .listcss{
    width: 100%;
    height:calc(100vh - 1.33333rem - 1.22667rem);
  }

  listcss::-webkit-scrollbar{
    display: none; /* Chrome Safari */
  }
  .sticky {
    position: sticky;
    top: 1.22667rem;
    left: 24%;
  }
</style>
